<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>simple</title>
  </head>
  <body>
    <div id="aa" class="box1 box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <style>
      .box4{
        width: 200px;
        height: 200px;
        /* border: 3px solid red; */
        border-width: 0px;
        border-style: solid;
        border-color: red blue gray #111222;
        /* border-left: 3px solid red; */
      }
      /* 类选择器  */
      .box1 {
        /* height: 60px; */
        background-color: #1433ff;
      }
      .box2 {
        /* border-radius: 40px; */
        background-color: rgb(78, 78, 50);
        border: dashed 4px red;
        /* border-style: solid;
        border-width: 4px;
        border-color: red; */
      }
      /* 标记选择器 */
      div {
        width: 100px;
      }
      /* ID选择器 */
      #aa {
        height: 60px;
      }
      .box3{
        height: 0;
        width: 0;
        /* background-color: transparent; */
        /* border: solid 100px red; */
        border-top:solid 100px blue;
        border-bottom: solid 100px transparent; 
        border-left:solid 100px transparent;
        /* border-right: solid 100px #882233;  */
        
      }

    </style>
  </body>
</html>
